﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>左右选中.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript">
		
	</script>
	<style>
		input[type='button']{  //这个是啥意思 (	给所有的button加上这个属性)11111
			width:50px;
		}
	</style>
	</head>
	 <script>
	 	onload=function(){
	 		//为啥选中的项向右添加后左边的选中的项消失了？（不明觉厉）1111111
	 		document.getElementById("toRight1").onclick=function(){
	 			var arr=document.getElementById("left").options;
	 		/*	alert(arr);
	 			alert(arr.length);*/
	 			for(var i=0;i<arr.length;i++){
	 				if(arr[i].selected){
	 					var i=arr[i]
	 					document.getElementById("right").options.add(i);
	 					break;
	 				}
	 			}
	 		}
	 		
	 		
	 	}
	 </script>
	<body>
		<table>
			<tr>
				<td>
					<select id="left" multiple="true" style="width:100px" size="10">
						<option>環</option>
						<option>芈</option>
						<option>琅</option>
						<option>琊</option>
						<option>爨</option>
						<option>甄</option>
						<option>槑</option>
						<option>夔</option>
					</select>
				</td>
				<td>
					<input type="button" value=">" id="toRight1"><br>
					<input type="button" value=">>" id="toRight2"><br>
					<input type="button" value=">>>" id="toRight3"><br><br>
					<input type="button" value="<" id="toLeft1"><br>
					<input type="button" value="<<" id="toLeft2"><br>
					<input type="button" value="<<<" id="toLeft3">
				</td>
				<td>
					<select id="right" multiple="true" style="width:100px" size="10">
						
					</select>
				</td>
			</tr>
		</table>
	</body>

</html>






